<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- STYLESHEETS --><!--[if lt IE 9]>
    <script src="../../js/flot/excanvas.min.js"></script>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]-->
    <link rel="stylesheet" type="text/css" href="../../css/cloud-admin.css">
    <link rel="stylesheet" type="text/css" href="../../css/themes/default.css" id="skin-switcher">
    <link rel="stylesheet" type="text/css" href="../../css/responsive.css">
    <link href="../../font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <!-- SELECT2 -->
    <link rel="stylesheet" type="text/css" href="../../js/select2/select2.min.css"/>
    <!-- UNIFORM -->
    <link rel="stylesheet" type="text/css" href="../../js/uniform/css/uniform.default.min.css"/>
    <!-- datatable -->
    <link rel="stylesheet" href="../../js/datatables/datatable.css">
    <link rel="stylesheet" href="../../js/datepicker/datepicker.css">
    <!-- FONTS
    <link href='http://fonts.useso.com/css?family=Open+Sans:300,400,600,700' rel='stylesheet' type='text/css'>
-->
</head>
<body>
<header class="navbar clearfix" id="header">
</header>

<!-- PAGE -->
<section id="page">
    <!-- SIDEBAR -->
    <div id="sidebar" class="sidebar">
        <div class="sidebar-menu nav-collapse">

            <!-- SIDEBAR MENU -->
            <ul>

            </ul>
            <!-- /SIDEBAR MENU -->
        </div>

    </div>
    <!-- /SIDEBAR -->
    <div id="main-content">
        <!-- SAMPLE BOX CONFIGURATION MODAL FORM-->
        <div class="modal fade" id="promotion_detail" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
             aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title">活动商品</h4>
                    </div>
                    <div class="modal-body">
                        <div class="form-group" style="height:auto">
                            <table id="promotion_product" cellpadding="0" cellspacing="0" border="0"
                                   class="datatable table table-striped table-bordered table-hover">
                                <thead>
                                <tr>
                                    <th>
                                        商品名称
                                    </th>
                                </tr>
                                </thead>
                                <tbody>

                                </tbody>


                            </table>
                        </div>


                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>

                    </div>
                </div>
            </div>
        </div>
        <!-- /SAMPLE BOX CONFIGURATION MODAL FORM-->
        <div class="container">
            <div class="row">
                <div id="content" class="col-lg-12">
                    <!-- PAGE HEADER-->
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="page-header">
                                <!-- STYLER -->

                                <!-- /STYLER -->
                                <!-- BREADCRUMBS -->
                                <ul class="breadcrumb">
                                    <li>
                                        <i class="fa fa-home"></i>
                                        <a href="index.html">首页</a>
                                    </li>
                                    <li>
                                        <a href="#">营销管理</a>
                                    </li>
                                    <li>优惠劵</li>
                                </ul>
                                <!-- /BREADCRUMBS -->

                            </div>
                        </div>
                    </div>
                    <!-- /PAGE HEADER -->
                    <!-- FORMS QUERY-->
                    <div class="row">
                        <div class="col-md-12">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="box border primary">
                                        <div class="box-title">
                                            <h4><i class="fa fa-bars"></i>查询条件</h4>
                                        </div>
                                        <div class="box-body big" style="padding:10px;">
                                            <form class="form-horizontal" role="form" id="form_card">
                                                <div class="form-group mrg-bt10">
                                                    <label class="col-sm-1 control-label"
                                                           style="width: auto">用户名：</label>
                                                    <div class="col-sm-2">
                                                        <input type="text" class="form-control" name="q"
                                                               placeholder="输入关键字">
                                                    </div>

                                                    <!-- <label class="col-sm-1 control-label" for="e1" style="width: auto">状态：</label>
                                                   <div class="col-sm-2">
                                                           <select id="status_select" class="col-md-12 select2-offscreen" tabindex="-1">
                                                              <option value=-1>请选择</option>
                                                              <option value="NotStarted">未开始</option>
                                                              <option value="Running">进行中</option>
                                                              <option value="Completed">已完成</option>
                                                           </select>
                                                   </div> -->
                                                    <label class="col-sm-1 control-label"
                                                           style="width: auto">卡券月份：</label>
                                                    <div class="col-sm-4" style="display:inline-flex">
                                                        <div class="col-sm-2" style="width:130px">
                                                            <input type="text"
                                                                   class="form-control width-50 bootstrap-datepicker Wdate"
                                                                   runat="server" name="startDate"
                                                                   style="width:110px;height: 34px;"/>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="form-group mrg-bt10">
                                                    <label class="col-sm-1 control-label"
                                                           style="width: auto">卡券类型：</label>
                                                    <div class="col-sm-2">
                                                        <select id="card_type_select"
                                                                class="col-md-12 select2-offscreen" tabindex="-1">
                                                            <option value="-1">请选择</option>
                                                            <option value="BasicsGift">基础礼</option>
                                                            <option value="QueenGift">女王礼</option>
                                                            <option value="BirthdayGift">生日礼</option>
                                                            <option value="DrawPrize">抽奖</option>
                                                            <option value="ShareReward">分享红包</option>
                                                            <option value="PullNew">拉新</option>
                                                        </select>
                                                    </div>

                                                    <label class="col-sm-1 control-label" for="e1" style="width: auto">赠品类型：</label>
                                                    <div class="col-sm-2">
                                                        <select id="card_mode_select"
                                                                class="col-md-12 select2-offscreen" tabindex="-1">
                                                            <option value=-1>选择类型</option>
                                                            <option value="Goods">实物</option>
                                                            <option value="Coupon">优惠券</option>
                                                            <option value="BalancePrice">成长基金</option>
                                                            <option value="Card">功能卡</option>
                                                        </select>
                                                    </div>
                                                    <div class="col-sm-1">
                                                        <a class="btn btn-primary search">查询</a>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- /FORMS QUERY -->
                    <!-- 	<div class="row" style="height: 30px;">
                                <div class="col-md-12">
                                    <div class="box ">
                                        <a href="add_card_coupon.html"  class="btn btn-success config">
                                            <i class="fa  fa-plus-square-o"></i> 新增卡券
                                        </a>
                                    </div>
                                </div>
                        </div>	 -->
                    <div class="row">
                        <!-- TABLES -->
                        <div class="col-md-12">
                            <!-- BOX -->
                            <div class="box border primary">
                                <div class="box-title">
                                    <h4><i class="fa fa-table"></i>卡券数：<span id="total"></span>条 </h4>

                                </div>
                                <div class="box-body">
                                    <table id="db_card_list" cellpadding="0" cellspacing="0" border="0"
                                           class="datatable table table-striped table-bordered table-hover">

                                    </table>
                                </div>
                            </div>
                            <!-- /BOX -->
                        </div>
                    </div>
                    <!-- /TABLES -->


                    <div class="footer-tools">
							<span class="go-top">
								<i class="fa fa-chevron-up"></i> Top
							</span>
                    </div>
                </div><!-- /CONTENT-->
            </div>
        </div>
    </div>
</section>
<!--/PAGE -->
<!-- JAVASCRIPTS -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- JQUERY -->
<script src="../../js/jquery/jquery-2.0.3.min.js"></script>

<!-- BOOTSTRAP -->
<script src="../../bootstrap-dist/js/bootstrap.min.js"></script>
<!-- BLOCK UI -->
<script type="text/javascript" src="../../js/jQuery-BlockUI/jquery.blockUI.min.js"></script>

<!-- AUTOSIZE -->
<script type="text/javascript" src="../../js/autosize/jquery.autosize.min.js"></script>
<!-- spinner -->
<script src="../../js/spinner/spin.js"></script>
<!-- DATA TABLES -->
<script type="text/javascript" src="../../js/datatables/bootstrap-select.js"></script>
<script type="text/javascript" src="../../js/datatables/datatable.js"></script>
<script type="text/javascript" src="../../js/datatables/datatable-bootstrap.js"></script>
<script type="text/javascript" src="../../js/datatables/datatable-tabletools.js"></script>
<script type="text/javascript" src="../../js/datatables/fnAddTr.js"></script>

<!-- INPUT MASK -->
<script type="text/javascript" src="../../js/bootstrap-inputmask/bootstrap-inputmask.min.js"></script>

<!-- SELECT2 -->
<script type="text/javascript" src="../../js/select2/select2.min.js"></script>
<!-- UNIFORM -->
<script type="text/javascript" src="../../js/uniform/jquery.uniform.min.js"></script>
<script type="text/javascript" src="../../js/datepicker/datepicker.js"></script>
<!--bootbox-->
<script type="text/javascript" src="../../js/bootbox/bootbox.min.js"></script>
<!-- COOKIE -->
<script type="text/javascript" src="../../js/jQuery-Cookie/jquery.cookie.min.js"></script>
<script language="javascript" type="text/javascript" src="../../js/My97DatePicker/WdatePicker.js"></script>
<!-- CUSTOM SCRIPT -->
<script src="../../js/script.js"></script>
<script src="../../js/common.js"></script>
<script>
    var Card = function () {
        var $mainDataTable = null;

        var searchCard = function () {
            var startDate = $("input[name=startDate]").val();

            var cardType = $("#card_type_select").val();
            var cardMode = $("#card_mode_select").val();
            var q = $("input[name=q]").val();
            var url = App.getContextPath() + "admin/card/searchCardDetail.do?q=" + q;

            if (cardType != -1 && cardType != null)
                url += "&cardType=" + cardType;
            if (cardMode != -1 && cardMode != null)
                url += "&cardMode=" + cardMode;
            if (startDate != "" && startDate != null)
                url += "&startDate=" + startDate + "-01";


            if ($mainDataTable) {
                $mainDataTable.api().ajax.url(url).load();
                return;
            }
            var dtSetting = $.dataTableSetting({
                "ajaxSource": url,
                "serverSide": true,
                "bFilter": false,// 去掉搜索框
                "bLengthChange": true,// 每页显示数量
                "sScrollX": "100%",
                "sScrollXInner": "100%",
                "iDisplayLength": 25,

                "bSort": false,
                "aoColumns": [{
                    "mDataProp": "cardId",
                    "sTitle": "ID",
                    "width": "5%"
                }, {
                    "mDataProp": "title",
                    "sTitle": "卡券名称",
                    "width": "10%"
                },
                    {
                        "sTitle": "卡券类型",
                        "mDataProp": "cardType",
                        "width": "8%",
                        "render": function (data, type, row) {
                            if (row.cardType == "QueenGift") return "女王礼";
                            if (row.cardType == "BirthdayGift") return "生日礼";
                            if (row.cardType == "BasicsGift") return "基础礼";
                            if (row.cardType == "DrawPrize") return "抽奖";
                            if (row.cardType == "ShareReward") return "分享红包";
                            if (row.cardType == "PullNew") return "拉新";
                        }
                    }, {
                        "sTitle": "赠品类型",
                        "mDataProp": "cardMode",
                        "width": "8%",
                        "render": function (data, type, row) {
                            if (row.cardMode == "Goods") return "实物";
                            if (row.cardMode == "BalancePrice") return "成长基金";
                            if (row.cardMode == "Coupon") return "优惠券";
                            if (row.cardMode == "Card") return "功能卡";
                        }
                    }
                    , {
                        "sTitle": "月份 ",
                        "mDataProp": "month",
                        "width": "8%"

                    }, {
                        "sTitle": "用户名",
                        "mDataProp": "userName",
                        "width": "8%"

                    }
                    , {
                        "sTitle": "状态",
                        "width": "10%",
                        "render": function (data, type, row) {
                            if (row.useStatus == "UnUsed") {
                                if (row.cardMode == "Card") return "未使用";
                                return "<div class='display:flex'><span>未使用</span><a href='javascript:;' class='btn btn-success createCard' userId=" + row.userId + " detailId=" + row.id + ">生成</a></div>";
                            }
                            if (row.useStatus == "Used") return "已使用";
                            if (row.isGived) return "已赠送";
                        }

                    }
                    ,
                    {
                        "sTitle": "关联ID",
                        "width": "10%",
                        "render": function (data, type, row) {
                            if (row.cardMode == 'Goods' && row.useStatus == 'Used')
                                return "<a href='../order/order_detail.html?id=" + row.relationId + "'>" + row.relationId + "</a>";
                            return row.relationId == null ? "" : row.relationId;
                        }
                    }, {

                        "sTitle": "领取时间",
                        "width": "12%",
                        "render": function (data, type, row) {
                            return $.getLocalTime(row.createTime);
                        }
                    }]
            });

            $mainDataTable = $("#db_card_list").dataTable(dtSetting);
        };

        var deleteCard = function (id) {
            var url = url = App.getContextPath() + "admin/card/deleteCard.do?id=" + id;
            $.ajax({
                type: "get",
                url: url,
                async: true,
                success: function (result) {
                    searchCard();
                }
            });
        };
        var selectMonth = function () {
            WdatePicker({dateFmt: 'yyyy-MM', isShowToday: true, isShowClear: false});
        };

        return {
            init: function () {
                $(".search").click(searchCard);
                $("select").select2();
                searchCard();
                $("input[name=startDate]").click(selectMonth);
                $("#db_card_list").on("click", ".createCard", function () {
                    var userId = $(this).attr("userId");
                    var detailId = $(this).attr("detailId");
                    $.blockUI();
                    $.confirm("确认生成订单?", function () {
                        $.ajax({
                            type: "post",
                            url: App.getContextPath() + "admin/card/createCard.do",
                            data: {detailId: detailId, userId: userId},
                            async: true,
                            success: function (result) {
                                $.unblockUI();
                                if (result.type === 'success') {
                                    searchCard();
                                } else {
                                    $.alert(result.content);
                                }

                            }
                        });
                    })
                    $.unblockUI();
                });
            }

        }

    }();

    $(function () {
        $("#header").load("../head.html");
        App.init(); //Initialise plugins and elements
        Card.init();

    });
</script>
<!-- /JAVASCRIPTS -->
</body>
</html>